সিলেক্ট ইউআরএল এপিআই দিয়ে বিজ্ঞাপন ক্রিয়েটিভ ঘোরান

সেভ করা পৃষ্ঠা গুছিয়ে রাখতে 'সংগ্রহ' ব্যবহার করুন আপনার পছন্দ অনুযায়ী কন্টেন্ট সেভ করুন ও সঠিক বিভাগে রাখুন।

শেয়ার্ড স্টোরেজের সুবিধা নিতে ইউআরএল এপিআই নির্বাচন করুন ব্যবহার করুন যাতে একজন ব্যবহারকারী সাইট জুড়ে কোন ক্রিয়েটিভ দেখেন।

একজন বিজ্ঞাপনদাতা বা বিষয়বস্তু প্রযোজক একটি প্রচারাভিযানে বিভিন্ন বিষয়বস্তু ঘূর্ণন কৌশল প্রয়োগ করতে এবং কার্যকারিতা বাড়ানোর জন্য বিষয়বস্তু বা সৃজনশীল ঘোরাতে চাইতে পারেন। ইউআরএল নির্বাচন করুন API বিভিন্ন ঘূর্ণন কৌশলগুলি চালানোর জন্য ব্যবহার করা যেতে পারে, যেমন অনুক্রমিক ঘূর্ণন এবং সমানভাবে-বিতরণ করা ঘূর্ণন, বিভিন্ন সাইট জুড়ে।

ইউআরএল এপিআই সৃজনশীল ঘূর্ণন নির্বাচন করুন, আপনি বিভিন্ন সাইট জুড়ে কোন সৃজনশীল ব্যবহারকারীরা দেখেন তা নির্ধারণ করতে সৃজনশীল আইডি, ভিউ সংখ্যা এবং ব্যবহারকারীর ইন্টারঅ্যাকশনের মতো ডেটা সঞ্চয় করতে পারেন।

অন্তর্নিহিত API এবং কীভাবে নির্বাচন কাজ করে সে সম্পর্কে আরও তথ্যের জন্য, URL API ডকুমেন্টেশন নির্বাচন করুন ।

সৃজনশীল ঘূর্ণন চেষ্টা করুন

সৃজনশীল ঘূর্ণন নিয়ে পরীক্ষা করার জন্য, নিশ্চিত করুন যে URL API নির্বাচন করুন এবং শেয়ার্ড স্টোরেজ সক্ষম করা আছে:

• chrome://settings/content/siteData এ, Allow sites to save data on your device বা Delete data sites have saved to your device when you close all windows নির্বাচন করুন৷
• chrome://settings/adPrivacy/sites এ, Site-suggested ads নির্বাচন করুন।

এই নথিতে কোড নমুনার একটি লাইভ সংস্করণের জন্য আমাদের শেয়ার্ড স্টোরেজ লাইভ ডেমো ব্যবহার করে দেখুন।

কোড নমুনা সহ ডেমো

এই উদাহরণে:

• creative-rotation.js হল তৃতীয়-পক্ষের স্ক্রিপ্ট যা ঘোরানো বিষয়বস্তুকে সংজ্ঞায়িত করে, সেই সাথে যেকোনো ডেটা যা পরবর্তী বিষয়বস্তু নির্বাচন এবং প্রদর্শনের জন্য নির্ধারণ করে, যেমন এই উদাহরণে ওজন। প্রকাশক পৃষ্ঠা এই স্ক্রিপ্টটি চালায়। এই স্ক্রিপ্টটি সঞ্চয়স্থানে উপলব্ধ ডেটা এবং ইউআরএলগুলির তালিকা থেকে নির্বাচন করার জন্য কোন সামগ্রী প্রদর্শন করতে হবে তা নির্ধারণ করতে ভাগ করা স্টোরেজ ওয়ার্কলেটকে কল করে৷

• creative-rotation-worklet.js হল তৃতীয় পক্ষের শেয়ার করা স্টোরেজ ওয়ার্কলেট যা ঘূর্ণন কৌশল দেখে, পরবর্তীতে কোন বিষয়বস্তু প্রকাশ করতে হবে তা গণনা করে এবং সেই সামগ্রীর অংশটি ফেরত দেয়।

ডেমো কিভাবে কাজ করে

1. যখন একজন ব্যবহারকারী প্রকাশক পৃষ্ঠায় যান, তখন পৃষ্ঠাটি তৃতীয় পক্ষের creative-rotation.js স্ক্রিপ্ট লোড করে। সৃজনশীল ঘূর্ণন স্ক্রিপ্ট ভাগ করা স্টোরেজ ওয়ার্কলেট লোড এবং চালানোর জন্য দায়ী। স্ক্রিপ্টটি বেছে নেওয়ার জন্য URLগুলির একটি তালিকা সহ ওয়ার্কলেট কল সরবরাহ করে৷
2. ওয়ার্কলেটে, যদি শেয়ার্ড স্টোরেজ এখনও আরম্ভ করা না হয়, স্টোরেজটি প্রারম্ভিক সৃজনশীল ঘূর্ণন কৌশল এবং সৃজনশীল সূচকের সাথে শুরু করা হয়। এই ডেমোতে ব্যবহৃত প্রাথমিক ঘূর্ণন কৌশল হল অনুক্রমিক কৌশল।
3. ওয়ার্কলেট শেয়ার্ড স্টোরেজ থেকে ঘূর্ণন মোড পড়ে এবং পরবর্তী বিজ্ঞাপনের সূচী প্রদান করে। অনুক্রমিক ঘূর্ণন মোডের ক্ষেত্রে, এটি পরবর্তী কলের জন্য ব্যবহার করার জন্য নতুন মান সহ শেয়ার্ড স্টোরেজে সৃজনশীল সূচক আপডেট করে। ওয়ার্কলেট selectURL কল করার সময় ব্যবহৃত resolveToConfig মানের উপর ভিত্তি করে একটি FencedFrameConfig বা অস্বচ্ছ URN অবজেক্ট প্রদান করে।
4. সৃজনশীল-ঘূর্ণন স্ক্রিপ্ট একটি বেড়াযুক্ত ফ্রেম বা একটি আইফ্রেমে নির্বাচিত বিজ্ঞাপন প্রদর্শন করে। রিটার্ন প্রকারের বিশদ বিবরণের জন্য একটি বিজ্ঞাপন নথি রেন্ডার দেখুন।
5. যখন একজন ব্যবহারকারী ঘূর্ণন মোড পরিবর্তন করেন, শেয়ার্ড স্টোরেজ ওয়ার্কলেট শেয়ার্ড স্টোরেজে সঞ্চিত সৃজনশীল ঘূর্ণন মোড মান আপডেট করে।
6. প্রকাশক পৃষ্ঠাটি পুনরায় লোড করার সময়, 1-4 পদক্ষেপগুলি পুনরাবৃত্তি করা হয় যা নির্বাচিত ঘূর্ণন কৌশলটির ভিত্তিতে পরবর্তী বিজ্ঞাপনের নির্বাচনকে সক্ষম করে তোলে

কোড নমুনা

creative-rotation.js এবং creative-rotation-worklet.js এর কোড নমুনা নিচে দেওয়া হল।

creative-rotation.js

const contentProducerUrl = 'https://your-server.example';

// Ad config with the URL of the ad, a probability weight for rotation, and the clickthrough rate.
const DEMO_AD_CONFIG = [
  {
    url: `${contentProducerUrl}/ads/ad-1.html`,
    weight: 0.7,
  },
  {
    url: `${contentProducerUrl}/ads/ad-2.html`,
    weight: 0.2,
  },
  {
    url: `${contentProducerUrl}/ads/ad-3.html`,
    weight: 0.1,
  },
];

async function setRotationMode(rotationMode) {
  // Load the worklet module
  const creativeRotationWorklet = await window.sharedStorage.createWorklet(
    `${contentProducerUrl}/url-selection/creative-rotation-worklet.js`,
    { dataOrigin: 'script-origin' }
  );

  await creativeRotationWorklet.run('set-rotation-mode', {
    data: { rotationMode }
  });
  console.log(`creative rotation mode set to ${rotationMode}`);
}

async function injectAd() {
  // Load the worklet module
  const creativeRotationWorklet = await window.sharedStorage.createWorklet(
    `${contentProducerUrl}/url-selection/creative-rotation-worklet.js`,
    { dataOrigin: 'script-origin' }
  );

  const urls = DEMO_AD_CONFIG.map(({ url }) => ({ url }));

  // Resolve the selectURL call to a fenced frame config only when it exists on the page
  const resolveToConfig = typeof window.FencedFrameConfig !== 'undefined';

  // Run the URL selection operation to determine the next ad that should be rendered
  const selectedUrl = await creativeRotationWorklet.selectURL('creative-rotation', urls, {
    data: DEMO_AD_CONFIG,
    resolveToConfig
  });

  const adSlot = document.getElementById('ad-slot');

  if (resolveToConfig && selectedUrl instanceof FencedFrameConfig) {
    adSlot.config = selectedUrl;
  } else {
    adSlot.src = selectedUrl;
  }
}

injectAd();

creative-rotation-worklet.js

class SelectURLOperation {
  async run(urls, data) {
    // Initially set the storage to sequential mode for the demo
    await SelectURLOperation.seedStorage();

    // Read the rotation mode from Shared Storage
    const rotationMode = await sharedStorage.get('creative-rotation-mode');

    // Generate a random number to be used for rotation
    const randomNumber = Math.random();

    let index;

    switch (rotationMode) {
      /**
       * Sequential rotation
       * - Rotates the creatives in order
       * - Example: A -> B -> C -> A ...
       */
      case 'sequential':
        const currentIndex = await sharedStorage.get('creative-rotation-index');
        index = parseInt(currentIndex, 10);
        const nextIndex = (index + 1) % urls.length;

        console.log(`index = ${index} / next index = ${nextIndex}`);

        await sharedStorage.set('creative-rotation-index', nextIndex.toString());
        break;

      /**
       * Evenly-distributed rotation
       * - Rotates the creatives with equal probability
       * - Example: A=33% / B=33% / C=33%
       */
      case 'even-distribution':
        index = Math.floor(randomNumber * urls.length);
        break;

      /**
       * Weighted rotation
       * - Rotates the creatives with weighted probability
       * - Example: A=70% / B=20% / C=10%
       */
      case 'weighted-distribution':
        console.log('data = ', JSON.stringify(data));
        // Find the first URL where the cumnulative sum of the weights
        // exceed the random number. The array is sorted by the weight
        // in descending order.
        let weightSum = 0;
        const { url } = data
          .sort((a, b) => b.weight - a.weight)
          .find(({ weight }) => {
            weightSum += weight;
            return weightSum > randomNumber;
          });

        index = urls.indexOf(url);
        break;

      default:
        index = 0;
    }

    console.log(JSON.stringify({ index, randomNumber, rotationMode }));
    return index;
  }

  // Set the mode to sequential and set the starting index to 0.
  static async seedStorage() {
    await sharedStorage.set('creative-rotation-mode', 'sequential', {
      ignoreIfPresent: true,
    });

    await sharedStorage.set('creative-rotation-index', 0, {
      ignoreIfPresent: true,
    });
  }
}

class SetRotationModeOperation {
  async run({ rotationMode }) {
    await sharedStorage.set('creative-rotation-mode', rotationMode);
  }
}

// Register the operation as 'creative-rotation'
register('creative-rotation', SelectURLOperation);
register('set-rotation-mode', SetRotationModeOperation);

স্ক্রিনশট সহ ওয়াকথ্রু

1. ইউআরএল এপিআই এবং শেয়ার্ড স্টোরেজ নির্বাচন করে ক্রিয়েটিভ রোটেশন অ্যাক্সেস করতে, https://shared-storage-demo.web.app/ এ যান। 'ক্রিয়েটিভ রোটেশন' ডেমো বেছে নিন।

2. 'প্রকাশক A' হিসেবে ডেমোটি অন্বেষণ করতে বেছে নিন। You will be redirected to https://shared-storage-demo-publisher-a.web.app/creative-rotation . শেয়ার্ড স্টোরেজে সংরক্ষিত সৃজনশীল ঘূর্ণন ডেটার উপর ভিত্তি করে পৃষ্ঠাটি সংখ্যাযুক্ত সামগ্রী লোড করে, URL নির্বাচন করুন API-এর মাধ্যমে অ্যাক্সেস করা হয়। সৃজনশীল ঘূর্ণনের জন্য ডেমো মোডগুলি অনুক্রমিক, এমনকি বিতরণ এবং ওজনযুক্ত বিতরণ। ওয়ার্কলেট আইফ্রেমে প্রদর্শিত বিষয়বস্তু নির্বাচন করার জন্য যুক্তি প্রয়োগ করে। নিম্নলিখিত চিত্র প্রকাশক পৃষ্ঠা দেখায়.

   
   

3. শেয়ার্ড স্টোরেজে কী সংরক্ষিত আছে তা দেখতে, Chrome DevTools-এ Application -> Shared Storage-এ নেভিগেট করুন। শেয়ার্ড স্টোরেজের জন্য দুটি এন্ট্রি তৈরি করা হয়েছে। https://shared-storage-demo-publisher-a.web.app মূলের জন্য একটি খালি সঞ্চয়স্থান উপলব্ধ। এতে সেই উৎসের জন্য নির্দিষ্ট স্টোরেজ থাকবে এবং আমাদের ডেমোর জন্য খালি থাকবে কারণ প্রকাশককে শেয়ার করা স্টোরেজে লেখার প্রয়োজন নেই। মনে রাখবেন যে আপনি যখন ডেমোর জন্য পরবর্তী সময়ে সেই পৃষ্ঠাটি দেখতে যাবেন তখন প্রকাশক B-এর জন্য একই ধরনের স্টোরেজ তৈরি করা হবে।

   
   

4. https://shared-storage-demo-content-producer.web.app মূলের জন্য আরেকটি শেয়ার্ড স্টোরেজ এন্ট্রি তৈরি করা হবে। এটি প্রকাশক পৃষ্ঠায় এমবেড করা তৃতীয় পক্ষের আইফ্রেমের সঞ্চয়স্থান। এই সঞ্চয়স্থানটি সৃজনশীল নির্বাচনের সমন্বয় করতে দুটি উপলব্ধ প্রকাশকের মধ্যে ডেটা ভাগ করতে ব্যবহার করা হবে। এই ভাগ করা স্টোরেজ দুটি কী-মূল্য জোড়া সংরক্ষণ করে প্রদর্শিত সৃজনশীল এবং ঘূর্ণন কৌশল সম্পর্কিত তথ্য সংরক্ষণ করতে ব্যবহৃত হবে। ডেমোতে ব্যবহৃত প্রথম কীটি হল creative-rotation-index যার মান হল ক্রিয়েটিভ মোডে বর্তমান সৃজনশীল সূচক। দ্বিতীয় কী হল creative-rotation-mode যা ব্যবহৃত ঘূর্ণন কৌশল নির্দেশ করে।

   
   

5. ক্রমিক মোডে থাকাকালীন পৃষ্ঠাটি রিফ্রেশ করার ফলে পরবর্তী সৃজনশীলটি 1, 2, 3, 1, … ক্রমানুসারে দেখানো হবে, কী ক্রিয়েটিভ-ঘূর্ণন-সূচকের মান অনুক্রমিক মোডে থাকাকালীন প্রদর্শিত সৃজনশীলের সূচক অনুযায়ী পরিবর্তিত হবে।

   
   

6. কন্ট্রোল বোতাম ব্যবহার করে সৃজনশীল ঘূর্ণন মোড পরিবর্তন করা মূল সৃজনশীল-ঘূর্ণন-মোডের মানকে সংশ্লিষ্ট কৌশলে আপডেট করবে। আইফ্রেমে দেখানোর জন্য পরবর্তী সৃজনশীল নির্বাচন করতে ওয়ার্কলেট কোড দ্বারা এটি ব্যবহার করা হবে। মনে রাখবেন যে ক্রিয়েটিভ-ঘূর্ণন-সূচকের জন্য সংরক্ষিত মান অনুক্রমিক ব্যতীত অন্য ঘূর্ণন মোডের জন্য পরিবর্তিত হয় না।

   
   

7. https://shared-storage-demo-publisher-b.web.app/creative-rotation- এ "প্রকাশক B"-এর পৃষ্ঠায় নেভিগেট করুন। ক্রমিক মোডে প্রদর্শিত ক্রিয়েটিভটি "প্রকাশক A"-এর URL দেখার সময় প্রদর্শিত ক্রমানুসারে পরবর্তী সৃজনশীল হওয়া উচিত। বিষয়বস্তু প্রযোজকের জন্য ভাগ করা সঞ্চয়স্থান পরিদর্শন করে, আপনি দেখতে পারেন যে "প্রকাশক A" এবং "প্রকাশক B" উভয়ই একই সঞ্চয়স্থান ভাগ করে এবং দেখানোর জন্য পরবর্তী সৃজনশীল এবং ব্যবহারের জন্য ঘূর্ণন কৌশল নির্বাচন করতে সেখানে সেটিংস ব্যবহার করছে৷

   
   

8. "প্রকাশক B" এর ভাগ করা সঞ্চয়স্থানটি খালি, "প্রকাশক A" এর ভাগ করা সঞ্চয়স্থানের মতোই।

   
   

   কেস ব্যবহার করুন

   সিলেক্ট ইউআরএল এপিআই-এর জন্য সমস্ত উপলব্ধ ব্যবহারের ক্ষেত্রে এই বিভাগে পাওয়া যাবে। আমরা প্রতিক্রিয়া পেতে এবং নতুন পরীক্ষার কেস আবিষ্কার করার সাথে সাথে আমরা উদাহরণ যোগ করা চালিয়ে যাব।

   • বিজ্ঞাপন ক্রিয়েটিভগুলি ঘোরান : সৃজনশীল আইডি এবং ব্যবহারকারীর ইন্টারঅ্যাকশনের মতো ডেটা সঞ্চয় করুন, বিভিন্ন সাইট জুড়ে কোন সৃজনশীল ব্যবহারকারীরা দেখেন তা নির্ধারণ করতে।
   • ফ্রিকোয়েন্সি অনুসারে বিজ্ঞাপন ক্রিয়েটিভ নির্বাচন করুন : বিভিন্ন সাইট জুড়ে কোন সৃজনশীল ব্যবহারকারীরা দেখছেন তা নির্ধারণ করতে ভিউ গণনা ডেটা ব্যবহার করুন।
   • A/B পরীক্ষা চালান : আপনি একটি ব্যবহারকারীকে একটি এক্সপেরিমেন্ট গ্রুপে বরাদ্দ করতে পারেন, তারপর ক্রস-সাইট অ্যাক্সেস করার জন্য শেয়ার্ড স্টোরেজে সেই গ্রুপটিকে সঞ্চয় করতে পারেন।
   • পরিচিত গ্রাহকদের জন্য অভিজ্ঞতা কাস্টমাইজ করুন : ব্যবহারকারীর নিবন্ধন স্থিতি বা অন্যান্য ব্যবহারকারীর অবস্থার উপর ভিত্তি করে কাস্টম সামগ্রী এবং কল-টু-অ্যাকশন শেয়ার করুন।

জড়িত এবং মতামত শেয়ার করুন

মনে রাখবেন যে URL নির্বাচন করুন API প্রস্তাবটি সক্রিয় আলোচনা এবং বিকাশের অধীনে রয়েছে এবং পরিবর্তন সাপেক্ষে।

আমরা ইউআরএল এপিআই নির্বাচন করার বিষয়ে আপনার মতামত শুনতে আগ্রহী।

• প্রস্তাব : বিস্তারিত প্রস্তাব পর্যালোচনা করুন.
• আলোচনা : প্রশ্ন জিজ্ঞাসা করতে এবং আপনার অন্তর্দৃষ্টি শেয়ার করতে চলমান আলোচনায় যোগ দিন।

অবগত থাকুন

• মেইলিং লিস্ট : ইউআরএল এবং শেয়ার্ড স্টোরেজ এপিআই-এর সাথে সম্পর্কিত সর্বশেষ আপডেট এবং ঘোষণার জন্য আমাদের মেইলিং তালিকায় সদস্যতা নিন।

সাহায্য প্রয়োজন?

• বিকাশকারী সমর্থন : অন্যান্য বিকাশকারীদের সাথে সংযোগ করুন এবং গোপনীয়তা স্যান্ডবক্স বিকাশকারী সমর্থন সংগ্রহস্থলে আপনার প্রশ্নের উত্তর পান৷